<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <p style="text-align: center">
            <img src="img/cat.png" style="position: relative">
        </p>
        <script>
            let cat = document.querySelector("img");
            let angle = Math.PI / 2;
            function animate(time, lastTime) {
                if (lastTime != null) {
                    angle += (time - lastTime) * 0.001;
                }
                lastTime = time;
                cat.style.top = (Math.sin(angle) * 20) + "px";
                cat.style.left = (Math.cos(angle) * 200) + "px";
                requestAnimationFrame(newTime => animate(newTime, time));
            }
            requestAnimationFrame(animate);
        </script>
    </body>

</html>